// import {PlCarousel, PlCarouselItem} from "plain-design";
import {notNullValue} from "../../packages/utils/notNullValue";
import './predefinedComponents.scss';
import {createCmsButton} from "../../components/CmsButton";
import {iReactivityApi, iVisualComponentData, iVisualEditorGetChildrenStyles, RenderNode} from "../../packages/utils/types.base";
import {createClasses} from "../../packages/utils/createClass";
import {createCmsCarousel} from "../../components/CmsCarousel";
import {tComponentRender} from "../../packages/createVisualEditorUser/createVisualEditorComponent/createVisualEditorComponentRender";
import {tVisualEditorBindingValue} from "../../packages/createVisualEditorUser/createVisualEditorBinding/createVisualEditorBindingValue";
// @ts-ignore
import {removeUnit} from 'plain-utils/string/removeUnit.ts';
// @ts-ignore
import {deepcopy} from 'plain-utils/object/deepcopy.ts';
import {createCmsRange} from "../../components/CmsImageRange";
import {iCmsRangeItemData} from "../../components/CmsImageRange/cms.image.range.utils";

export function predefineComponentRender({ api, componentRender: { registryComponentRender }, bindingValue: { getBindingValue } }: { api: iReactivityApi, componentRender: tComponentRender, bindingValue: tVisualEditorBindingValue }) {

  const classes = createClasses(api.type);

  /*---------------------------------------可用组件-------------------------------------------*/
  registryComponentRender('image', ({ data, renderList }) => <>
    <img
      src={getBindingValue(data.data.url, data) as string}
      style={{
        width: data.data.width,
        height: data.data.height,
        display: 'block',
        objectFit: data.data.objectFit,
        objectPosition: data.data.objectPosition
      }}/>
    {!!data.childrenData && renderList({ scope: data, autoClearEmptyChildrenData: true })}
  </>);

  const CmsButton = createCmsButton(api);
  registryComponentRender('button', ({ data }) => (
    <CmsButton mode={data.data.mode} size={data.data.size} width={data.data.width} arrow={data.data.arrow}>
      {getBindingValue(data.data.text, data)}
    </CmsButton>
  ));

  registryComponentRender('column-container', ({ data, renderList }) => (
    renderList({
      scope: data,
      childrenLength: data.data.columnNum,
      getChildrenStyles: ({ index, page }) => data.childrenData && index !== data.childrenData.length - 1 ? { marginRight: `${notNullValue(data.data.gutter, page.gutter)}px` } : undefined
    })
  ));

  registryComponentRender('rows-container', ({ data, renderList }) => (
    renderList({
      scope: data,
      childrenLength: data.data.rowsNum,
      getChildrenStyles: ({ index, page }) => data.childrenData && index !== data.childrenData.length - 1 ? { marginBottom: `${notNullValue(data.data.gutter, page.gutter)}px` } : undefined,
    })
  ));

  const { Carousel, CarouselItem } = createCmsCarousel(api);
  registryComponentRender('carousel-container', ({ data, renderItem, isPreview }) => {
    return (
      <Carousel
        modelValue={!isPreview ? data.readonlyData?.activeIndex : 0}
        onUpdateModelValue={(val: number) => !isPreview && (data.readonlyData.activeIndex = val)}
        autoplay={isPreview ? data.data.autoplay : false}
        loop={isPreview ? data.data.loop : false}
        childNum={data.data.carouselNum}
        hideButton={data.data.hideButton}
        {...classes('visual-editor-carousel-container')}
        style={{ overflow: 'hidden' }}>
        {new Array(data.data.carouselNum).fill(null).map((_, index) => (
          <CarouselItem key={index}>
            {renderItem({
              bindIndex: index,
              bindList: data.childrenData,
              onChange: () => {data.childrenData = [...data.childrenData || []];},
            })}
          </CarouselItem>
        ))}
      </Carousel>
    );
  });
  registryComponentRender('fixed-size-container', ({ data, renderList }) => {
    return (
      <div {...classes('cms-visual-editor-fixed-size-container')}>
        {renderList({ scope: data, childrenLength: 1 })}
      </div>
    );
  });
  registryComponentRender('square-container', ({ data, renderList }) => {
    return (
      <div {...classes('cms-visual-editor-square-container-wrapper')}>
        <div {...classes('cms-visual-editor-square-container')}>
          {renderList({ scope: data, childrenLength: 1 })}
        </div>
      </div>
    );
  });
  registryComponentRender('text', ({ data }) => {
    return getBindingValue(data.data.text, data);
  });
  registryComponentRender('video', ({ data }) => {
    const binding: any = {
      src: data.data.url,
      controls: true,
      muted: data.data.autoplay,
      style: { display: 'block', width: data.data.width, height: data.data.height },
    };
    binding[api.type === "react" ? 'autoPlay' : 'autoplay'] = data.data.autoplay;
    binding[api.type === "react" ? 'controlsList' : 'controllist'] = 'nodownload,nofullscreen';
    return (
      <video {...binding}/>
    );
  });
  registryComponentRender('product-list', ({ data, isPreview, renderList, renderFakeList }) => {

    const width = `calc((100% - ${(removeUnit(data.data.gutter) as any) * (data.data.column - 1)}px)/${data.data.column})`;

    const getChildrenStyles: iVisualEditorGetChildrenStyles = ({ index }) => {
      return {
        width,
        marginBottom: data.data.gutter,
        marginRight: index != null && (index + 1) % data.data.column === 0 ? null : data.data.gutter
      };
    };

    if (!isPreview && !!data.data.isEditingTemplate) {
      return (renderList({ scope: data, childrenLength: data.data.column, getChildrenStyles, }));
    } else {
      const templateData = data.childrenData?.[0];
      if (!templateData) {
        /*当前没有模板*/
        return (
          <div>
            {data.data.list?.map((item: any, index: number) => (
              <div key={index}>{item.name}</div>
            ))}
          </div>
        );
      } else {
        /*当前有模板，伪造子节点数据*/
        const componentDataList: iVisualComponentData[] = !!data.data.list ? data.data.list.map((item: any) => deepcopy({
          ...templateData,
          action: { code: 'bind-product' },
          data: {
            ...templateData.data,
            product: item,
          },
        })) : [];
        return renderFakeList({ list: componentDataList, parent: data, getChildrenStyles });
      }
    }
  });


  const { CmsRangeItem, CmsRange } = createCmsRange(api);
  registryComponentRender('range-container', ({ data, isPreview, renderList }) => {
    if (isPreview) {
      return (
        renderList({ scope: data })
      );
    } else {
      return (
        <CmsRange
          list={(data.childrenData || []).map(childData => childData.readonlyData)}
          onAdd={(val: iCmsRangeItemData) => data.childrenData = [
            ...data.childrenData || [],
            { id: Date.now(), group: '可用组件', name: '热区节点', code: 'range-item', style: {}, data: {}, readonlyData: val }
          ]}
        >
          {renderList({ scope: data, autoClearEmptyChildrenData: true })}
        </CmsRange>
      );
    }
  });
  registryComponentRender('range-item', ({ data, isPreview, }) => {
    if (isPreview) {
      return (baseContainer: RenderNode) => (
        <div
          key={data.id}
          style={{
            position: 'absolute',
            top: data.readonlyData.top + '%',
            left: data.readonlyData.left + '%',
            height: data.readonlyData.height + '%',
            width: data.readonlyData.width + '%',
          }}>
          {baseContainer}
        </div>
      );
    }
    return (baseContainer: RenderNode) => {
      return (
        <CmsRangeItem data={data.readonlyData}>
          {baseContainer}
        </CmsRangeItem>
      );
    };
  });

  /*/!*---------------------------------------容器组件-------------------------------------------*!/
  registryComponentRender('普通容器', undefined);
  registryComponentRender('宫格容器', undefined);
  registryComponentRender('正方形容器', undefined);
  registryComponentRender('多列容器', undefined);
  registryComponentRender('卡片容器', undefined);
  registryComponentRender('选项卡容器', undefined);
  registryComponentRender('折叠容器', undefined);

  /!*---------------------------------------媒体组件-------------------------------------------*!/
  registryComponentRender('音频', undefined);
  registryComponentRender('视频', undefined);
  registryComponentRender('地图', undefined);
  registryComponentRender('图片', undefined);
  registryComponentRender('文件', undefined);
  /!*---------------------------------------图表组件-------------------------------------------*!/
  registryComponentRender('面积图', undefined);
  registryComponentRender('柱状图', undefined);
  registryComponentRender('漏斗图', undefined);
  registryComponentRender('折线图', undefined);
  registryComponentRender('饼图', undefined);
  /!*---------------------------------------组合组件-------------------------------------------*!/
  registryComponentRender('商品卡片', undefined);
  registryComponentRender('横幅', undefined);
  registryComponentRender('推荐列表', undefined);
  registryComponentRender('活动', undefined);
  registryComponentRender('商品大类', undefined);
  /!*---------------------------------------其他组件-------------------------------------------*!/
  registryComponentRender('登陆表单', undefined);
  registryComponentRender('注册表单', undefined);
  registryComponentRender('商城模板', undefined);
  registryComponentRender('未命名_1', undefined);
  registryComponentRender('未命名_2', undefined);
  /!*---------------------------------------基础组件-------------------------------------------*!/
  registryComponentRender('输入框', undefined);
  registryComponentRender('多行输入', undefined);
  registryComponentRender('密码输入', undefined);
  registryComponentRender('数字输入', undefined);
  registryComponentRender('评分输入', undefined);
  registryComponentRender('滑动条', undefined);
  registryComponentRender('选择框', undefined);
  registryComponentRender('树形选择', undefined);
  registryComponentRender('级联选择', undefined);
  registryComponentRender('穿梭框', undefined);
  registryComponentRender('复选框组', undefined);
  registryComponentRender('单选框组', undefined);
  registryComponentRender('日期选择', undefined);
  registryComponentRender('日期范围', undefined);
  registryComponentRender('时间选择', undefined);
  registryComponentRender('时间范围', undefined);
  registryComponentRender('上传', undefined);
  registryComponentRender('拖拽上传', undefined);
  registryComponentRender('开关', undefined);*/
}
